let loadShopURL=`http://jx.xuzhixiang.top/ap/api/cart-list.php`
let userid=localStorage.getItem('uid')
if(userid==null){
    location.href='../html/login.html'
}
axios.get(loadShopURL,{params:{
    id:userid,
}}).then(function(resolve){
    let shop=resolve.data.data;
    console.log(shop);
    shop.forEach((v,i)=>{
         loadlist(v)
    });
    times=[0]
}).catch(function(reject){
    console.log(reject);
})

let alltype=['礼包','大型多人角色扮演游戏','卡牌包','策略类卡牌游戏','团队动作游戏','即时策略游戏','多人在线战术策略游戏','可解锁内容','角色动作扮演游戏','游戏升级包','游戏服务','动作角色扮演游戏','游戏时间','仅限狂野模式','虚拟坐骑','指挥官']
// 计数，每五个添加class消除右边距
let times=[0]
function loadlist(key){
    let desc=key.pdesc.split('/')
    let hightlight=''
    let hightlighttrueorfalse=alltype.every((v,i)=>v!=desc[1])
    let tag=''
    if(hightlighttrueorfalse){
        hightlight=`<p class="hightlight">${desc[1]}</p>`
        tag=`<p class="type">${desc[2]}</p>`
    }else{
        tag=`<p class="type">${desc[1]}</p>`
    }
    let spanPrice=``
    switch (desc.length) {
        case 3:
            if (/奥术宝珠/.test(desc[2])) {
                spanPrice=`<div><span class="nomoney"><img src="../images/shop/test_price.png" alt="">${desc[2]}</span>`
            }else{
                spanPrice=`<div><span class="no_payoffPrice">${desc[2]}</span>`
            }
        break;
        case 4:
            spanPrice=`<div><span class="no_payoffPrice">${desc[3]}</span>`
        break;
        case 6:
            spanPrice=`<div><span class="payprice">${desc[3]}</span><span class="price">${desc[4]}</span><span class="payoff">${desc[5]}</span>`
        break;
        default:
        break;
    }
    spanPrice+=`<div class='gobuy' onclick='getitnow(${key.pid})'>立即购买</div><div class='buygift'>赠礼</div><div class='delshop'  onclick='delSHOP(${key.pid})'>×移除</div></div></div></div>`
    let goods=''
    let PICSRC=''
    switch (key.pname) {
        case '暗黑破坏神III':
            PICSRC ="../images/gameicon/diablo-iii.svg"
        break;
        case '守望先锋':
            PICSRC="../images/gameicon/overwatch.svg"
        break;
        case '风暴英雄':
            PICSRC="../images/gameicon/heroes-of-the-storm.svg"
        break;
        case '星际争霸II':
            PICSRC="../images/gameicon/starcraft-ii.svg"
        break;
        case '炉石传说':
            PICSRC="../images/gameicon/hearthstone.svg"
        break;
        case '魔兽世界':
            PICSRC="../images/gameicon/world-of-warcraft.svg"
        break;
        case '魔兽世界(经典怀旧服)':
            PICSRC="../images/gameicon/world-of-warcraft-classic.svg"
        break;
        default:
        break;
    }
    // 分类型判断计数
    let right=false;
    ++times[0];
    right=times[0]%4?true:false;
    if(right){
        goods=`<div>
        <img src="${key.pimg}" alt="">
        <div>
            <p class="tag"><img src="../${PICSRC}" alt="">${key.pname}</p>
            <p class="desc">${desc[0]}</p>`
    }else{
        goods=`<div class='noright'>
        <img src="${key.pimg}" alt="">
        <div>
            <p class="tag"><img src="../images/gameicon/world-of-warcraft.svg" alt="">${key.pname}</p>
            <p class="desc">${desc[0]}</p>`
    }
    if(hightlight!=''){
        goods+=hightlight
    }
    goods+=`<p class="type">${tag}</p>`
    goods+=spanPrice;
    document.querySelector('.rightmain').innerHTML+=goods;
}
// top
// userpannel
let userpannel=document.querySelector('.top span:nth-child(4)')
let userpannel_showORhide=0
userpannel.onclick=(evt)=>{
    evt.stopPropagation();
    userpannel_showORhide++;
    let userpannelShowList=document.querySelector('.top span:nth-child(4) ul');
    let allwrap=document.querySelector('.allwrap')
    // 点击显示，再点隐藏
    if(userpannel_showORhide%2==1){
        userpannelShowList.style.display='block';
        allwrap.style.display='block'
        allwrap.style.height=getComputedStyle(document.querySelector('body')).height;
        allwrap.style.width=getComputedStyle(document.querySelector('body')).width;

    }else{
        userpannelShowList.style.display='none';
        allwrap.style.display='none'

    }
    // 点击任何地方隐藏此面板
    document.onclick=()=>{
        userpannelShowList.style.display='none';
        allwrap.style.display='none'
        userpannel_showORhide=0;
    }
}
// nav沾顶,返回顶部
let navfixed=document.querySelector('.nav_search_like')
window.onscroll=()=>{
    if (scrollY>88) {
        navfixed.style.position='fixed'
    }else{
        navfixed.style.position='static'
    }
}
// nav显示菜单
let nav_showORhide=0;
let showlist=document.querySelector('.nav_search_like .showlist>div')
showlist.onclick=(evt)=>{
    evt.stopPropagation();
    nav_showORhide++;
    let showlistUL=document.querySelector('.showlist>nav')
    let showlistIMG=document.querySelector('.showlist>div>img')
    if (nav_showORhide%2==1) {
        showlistUL.style.display='block'
        showlistIMG.style.transform='rotate(180deg)'
        showlist.style.background='#303237'
    }else{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        showlist.style.background='#25262C'
    }
    document.onclick=()=>{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        showlist.style.background='#25262C'
        nav_showORhide=0;
    }
}
// nav 战网点数
let navnum_showORhide=0;
let battlenetcount=document.querySelector('.nav_search_like .battlenetcount')
battlenetcount.onclick=(evt)=>{
    evt.stopPropagation();
    navnum_showORhide++;
    let showlistUL=document.querySelector('.battlenetcount>ul')
    let showlistIMG=document.querySelector('.battlenetcount>img')
    if (navnum_showORhide%2==1) {
        showlistUL.style.display='block'
        showlistIMG.style.transform='rotate(180deg)'
        battlenetcount.style.background='#303237'
    }else{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        battlenetcount.style.background='#25262C'
    }
    document.onclick=()=>{
        showlistUL.style.display='none'
        showlistIMG.style.transform='rotate(0deg)'
        battlenetcount.style.background='#25262C'
        navnum_showORhide=0;
    }
}
// nav 搜索
let searchipt=document.querySelector('.nav_search_like .search input')
let searchClearBtn=document.querySelector('.nav_search_like .search button')
searchipt.onkeydown=(evt)=>{
    // 有值显示清空按钮
    if(searchipt.value!=''){
        searchClearBtn.style.opacity='1'
    }else{
        searchClearBtn.style.opacity='0'
    }
    // 回车搜索
    if (evt.keyCode==13) {
        if (searchipt.value=='') {
            alert('请输入搜索内容')
        }else location.href=`../html/search.html?search=${searchipt.value}`
    }
}
searchClearBtn.onclick=()=>{
    searchipt.value='';
    searchClearBtn.style.opacity='0'
}
// 登录
let loginbtn=document.querySelector('.top ul li:first-child button')
loginbtn.onclick=(evt)=>{
    evt.stopPropagation();
    location.href=`../html/login.html`
}
// 注册
let resignbtn=document.querySelector('.top ul:last-child')
resignbtn.onclick=(evt)=>{
    evt.stopPropagation()
    location.href=`../html/resign.html`
}
// 自动登录
let username=localStorage.getItem('username')
let password=localStorage.getItem('password')
function checklogin(){
    let loginURL=`http://jx.xuzhixiang.top/ap/api/login.php`
            axios.get(loginURL,{params:{
                username,
                password,
            }}).then(function(resolve){
                if(resolve.data.code==1){
                    localStorage.setItem('token',resolve.data.data.token)
                    document.querySelector('.top span:last-child').innerHTML=`
                    <a href="javaScript:">${username}</a>
                    <div class="user_triangle"></div>
                    <ul>
                        <li><img src="images/top/login_user.jpg" alt=""><a href="#">账户</a></li>
                        <li class='loginout'><img src="images/top/login_resign.jpg" alt=""><a href="#">退出登录</a></li>
                    </ul>
                    </a>`
                    document.querySelector('.loginout').onclick=()=>{
                        localStorage.clear();
                        location.href='../index.html'
                    }
                }else{
                    localStorage.clear();
                }
            }).catch(function(reject){
                console.log(reject);
            });
}
checklogin();
// 左侧列表切换
let selectLIST=document.querySelector('.leftlist ul')
selectLIST.onclick=(evt)=>{
    for(let i=1;i<6;i++){
        document.querySelector(`.leftlist ul li:nth-child(${i})`).classList.remove('show')
    }
    if(evt.target.nodeName.toLowerCase()=='li'){
        evt.target.classList.add('show');
    }
}
// 移除
function delSHOP(pid){
    let delURL=`http://jx.xuzhixiang.top/ap/api/cart-delete.php`
    axios.get(delURL,{params:{
        uid:userid,
        pid,
    }}).then(function(resolve){
        let loadShopURL=`http://jx.xuzhixiang.top/ap/api/cart-list.php`
        let userid=localStorage.getItem('uid')
        axios.get(loadShopURL,{params:{
            id:userid,
        }}).then(function(resolve){
            let shop=resolve.data.data;
            document.querySelector('.rightmain').innerHTML=``;
            shop.forEach((v,i)=>{
                loadlist(v)
            });
            times=[0]
        }).catch(function(reject){
            console.log(reject);
        })
    }).catch(function(reject){
        console.log(reject);
    })
}
function getitnow(pid){
    location.href='../html/pay.html'
}